<template>
	<view>
		<view class="titbox"></view>
		<view class="programbox">
			<view class="ideabox">
				<view class="catebox">意见建议分类</view>
				<view class="listbox">
					<view class="itembox" v-for="(item,index) in list" :key="item.id"
					:style="{'background':item.id==curroneindex?'#3283C5':'','color':item.id==curroneindex?'#FFF':''}" @click="handletip(item)">
						{{item.name}} 
					</view>
				</view>
				<view class="catebox">选择满意度</view>
				<view class="Satisfaction">
					<view class="itembox" v-for="(item,index) in Satisfactionlist" :key="index" @click="handlesat(index)">
						<image v-if="index!==Satindex" src="../../static/yuan.png"></image>
						<image v-else src="../../static/guo.png"></image>
						<view>{{item}}</view>
					</view>
				</view>
				<view class="textareabox">
					<textarea v-model="content" @blur="sensitive" maxlength="100" placeholder="请描述您的问题/建议, 可以添加图片, 我们将会尽快优化体验, 感谢您的反馈"></textarea>
					<view class="imgbox">
						<view class="imgitem" v-for="(item,index) in imglist" :key="index">
							<image class="closenbox" src="../../static/closen.png" @click="delimg(index)"></image>
							<image :src="item"></image>
						</view>
						<view class="imgitem" style="display: flex;justify-content: center;font-size: 28rpx;color: #666666;"
						@click="uploadimg()"  v-if="imglist.length>0&&imglist.length!==3">
							<view style="width: 183rpx;height: 183rpx;border: 1rpx dashed #999999;border-radius: 8rpx;text-align: center;">
								<image style="width: 66rpx; height: 60rpx;margin: 20rpx 0 20rpx 0;" src="../../static/xiangji.png"></image>
								<view>添加图片</view>
							</view>
						</view>
					</view>
					<view class="addtu" v-if="imglist.length==0" @click="uploadimg()">
						<image src="../../static/xiangji.png"></image>
						<view>添加图片</view>
					</view>
				</view>
			</view>
			<view class="bottombox">
				<image src="../../static/bottom2.png"></image>
			</view>
			<!-- <view class="butbox" @click="nexttip()">
				下一步
			</view> -->
			<view style="height: 30rpx;"></view>
			<view class="jiange"></view>
		</view>
		<!-- 背景图 -->
		<view class="bgbox"></view>
		<!-- <view style="height:260rpx;"></view> -->
		<view class="bottombut">
			<view class="butbox" @click="nexttip()">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				curroneindex:null,
				imglist:[],
				Satisfactionlist:['满意','不满意'],
				Satindex:null,//满意度
				content:'',//多行文本
				fd:false,
				wyj:null,
			}
		},
		onLoad(option) {
			// this.road_id = option.road_id
			this.getlist()
		},
		methods: {
			//获取意见列表
			getlist(){
				this.$http({
					url:'api/Answer/department',
					data:{
						// token:uni.getStorageSync('token')
					}
				}).then(res=>{
					this.list = res.data
					// this.list.unshift({create_time: 1680256439,
					// 				id: '',
					// 				name: "无意见",
					// 				pid: 1,
					// 				sort: 110});
				})
			},
			//选择意见类型
			handletip(item){
				this.curroneindex = item.id
				this.wyj = item.name
				if(item.name=="无意见"){
					this.Satindex =0
				}else{
					this.Satindex =null
				}
			},
			//满意度选择
			handlesat(index){
				if(this.wyj=="无意见"){
					this.Satindex = 0
				}else{
					this.Satindex = index
				}
			},
			uploadimg() {
				this.$upload(1).then(res => {
					this.imglist.push(...res)
					console.log(this.imglist,'this.imglist',res)//item.file.full_url
				})
			},
			//敏感词
			sensitive(){
				
			},
			//删除图片
			delimg(item,index){
				this.imglist.splice(index,1)
			},
			//提交抽奖
			nexttip(){
				
				if(!this.curroneindex&&this.Satindex!==0){
					uni.showToast({
						title:'请选择意见分类',
						icon:'none'
					})
					return
				}
				if(this.Satindex==null){
					uni.showToast({
						title:'请选择满意度',
						icon:'none'
					})
					return
				}
				// if(this.Satindex==2&&!this.content){
				// 	uni.showToast({
				// 		title:'请输入您的问题/建议',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				// if(this.Satindex==2&&this.imglist.length==0){
				// 	uni.showToast({
				// 		title:'请上传图片',
				// 		icon:'none'
				// 	})
				// 	return
				// }
			
				this.$http({
					url:'api/Answer/verify',
					data:{
						content:this.content
					}
				}).then(async res=>{
					if(this.curroneindex==null){
						uni.showToast({
							title:'请选择意见分类',
							icon:'none'
						})
						return
					}
					if(this.fd){
						return
					}
					this.fd = true
					// 满意直接处理
					if(this.Satindex==0){
						let res = await this.$http({
							url:'api/Answer/post_answer',
							data:{
								token:uni.getStorageSync('token'),
								answer:uni.getStorageSync('answer'),
								type:1,//类型1满意2一般3不满意
								content:this.content,
								admin_id:uni.getStorageSync('admin_id'),
								img:this.imglist,
								department_id:25,
								road_id:'',
								p_road_id:'',
								road_number:''
							}
						})
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:3000
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/luck_draw/luck_draw'
							})
						},500)
						return
					}
					this.Satindex = this.Satindex==0?1:3
					uni.reLaunch({
						url:'/pages/railway/railway?type='+this.Satindex+'&content='+this.content+'&img='+this.imglist+'&department_id='+this.curroneindex
					})
				})
				
				// this.$http({
				// 	url:'api/Answer/post_answer',
				// 	data:{
				// 		token:uni.getStorageSync('token'),
				// 		answer:uni.getStorageSync('answer'),
				// 		type:this.Satindex+1,//类型1满意2一般3不满意
				// 		content:this.content,
				// 		admin_id:uni.getStorageSync('admin_id'),
				// 		img:this.imglist,
				// 		department_id:this.curroneindex,
				// 		road_id:this.road_id
				// 	}
				// }).then(res=>{
				// 	this.fd = true
				// 	uni.navigateTo({
				// 		url:'/pages/luck_draw/luck_draw'
				// 	})
				// })
			},
		}
	}
</script>

<style>
	page{
		background: linear-gradient(-89deg, #008fd6, #3ba3ed);
	}
</style>
<style lang="scss" scoped>
	.bgbox{
		width: 100%;
		background: url(http://wjdc.zxkjnc.com/images/hllhp1.png) no-repeat;
		height: 795rpx;
		background-size: 100% 797rpx;
	}
	.bottombut{
		width:100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		background: linear-gradient(-89deg, #008fd6, #3ba3ed);
		z-index: 99;
		.butbox{
			width: 669rpx;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			margin:20rpx auto;
			// margin: 90rpx 0 30rpx 0;
			background: url(http://wjdc.zxkjnc.com/images/but.png) no-repeat;
			background-size: 669rpx 89rpx;
			font-size: 38rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	// .butbox{
	// 	left: 50%;
	// 	transform: translate(-50%,0);
	// 	position: absolute;
	// 	width: 669rpx;
	// 	height: 89rpx;
	// 	text-align: center;
	// 	line-height: 89rpx;
	// 	margin: 90rpx 0 30rpx 0;
	// }
	.titbox{
		// width: 98%;
		top: 30rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 740rpx;
		height: 22rpx;
		background: linear-gradient(92deg, #6EA7FB, #7CBDF7);
		border-radius: 10rpx;
		position: absolute;
	}
	.programbox{
		width: 720rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 49rpx 0rpx rgba(59,137,204,0.68);
		min-height: 200rpx;
		left: 50%;
		top: 52rpx;
		transform: translate(-50%,0);
		position: absolute;
		margin-bottom: 20rpx;
		.ideabox{
			width: 92%;
			margin: 0 auto;
			.catebox{
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}
			.Satisfaction{
				height: 80rpx;
				background: linear-gradient(90deg, #CAE4FF, #FFFFFF);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 50rpx;
				justify-content: space-around;
				.itembox{
					width: 33.3%;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #222222;
					image{
						width: 38rpx;
						height: 38rpx;
						margin: 0 20rpx 0 30rpx;
					}
				}
			}
			.listbox{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				// justify-content: space-around;
				.itembox{
					height: 72rpx;
					background: #E1F0FF;
					border-radius: 10rpx;
					padding: 0 10rpx;
					line-height: 70rpx;
					width: fit-content;
					margin-bottom: 20rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					margin-right: 20rpx;
				}
			}
			.textareabox{
				width: 100%;
				background: linear-gradient(90deg, #CAE4FF, #FFFFFF);
				padding-bottom: 20rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				>textarea{
					width: 90%;
					margin: 20rpx auto;
					padding-top: 20rpx;
				}
				.imgbox{
					width: 90%;
					margin: 20rpx auto;
					display: flex;
					flex-wrap: wrap;
					.imgitem{
						width: 33.3%;
						// margin: 0 auto;
						text-align: center;
						position: relative;
						image{
							width: 184rpx;
							height: 184rpx;
							border-radius: 8rpx;
						}
						.closenbox{
							width: 36rpx;
							height: 36rpx;
							border-radius: 100%;
							position: absolute;
							z-index: 5;
							right: 0;
						}
					}
				}
				.addtu{
					width: 90%;
					margin: 20rpx auto;
					height: 184rpx;
					border: 1rpx solid #999999;
					border-radius: 8rpx;
					text-align: center;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					font-size: 28rpx;
					image{
						width: 66rpx;
						height: 60rpx;
						margin: 20rpx auto;
					}
				}
			}
		}
	}
	.xuanA{
		width: 580rpx;
		/* height: 35rpx; */
		color: #555555;
		border-radius: 50rpxs;
		font-size: 30rpx;
		text-align: start;
		line-height: 40rpx;
		white-space: normal;
		margin-bottom: 20rpx;
		word-break: break-all;
		padding: 30rpx 10rpx 30rpx 10rpx;
	}
	.xuanA.active{
		background-color: #4CD964;
	}
	.hide{
		/* display: none; */
		opacity: 0;
		margin-top: -100px;
		position: absolute;
		pointer-events:none;
		width: calc(100% - 40rpx);
	}
	// .butbox{
	// 	left: 50%;
	// 	transform: translate(-50%,0);
	// 	position: absolute;
	// 	width: 669rpx;
	// 	height: 89rpx;
	// 	text-align: center;
	// 	line-height: 89rpx;
	// 	margin: 90rpx 0 30rpx 0;
	// 	background: url(http://wjdc.zxkjnc.com/images/but.png) no-repeat;
	// 	background-size: 669rpx 89rpx;
	// 	font-size: 38rpx;
	// 	font-family: Source Han Sans CN;
	// 	font-weight: 500;
	// 	color: #FFFFFF;
	// }
	.bottombox{
		left: 50%;
		transform: translate(-50%,0);
		position: absolute;
		// width: 669rpx;
		// height: 89rpx;
		// text-align: center;
		// line-height: 89rpx;
		// margin: 90rpx 0 30rpx 0;
		width: 720rpx;
		height: 39rpx;
		margin-top: 19rpx;
		image{
			width: 720rpx;
			height: 39rpx;
		}
	}
	.jiange{
		width: 100%;
		height: 220rpx;
		position: absolute;
	}

</style>
